import { inject } from "mobx-react";
import React from "react"; 
import {useNavigate} from 'react-router';

function House({store, houseList}) { 
  console.log(store);
  const navigate = useNavigate();
  // 跳转到详情
  const toDetail = (item) => {
    // 一个参数: 目的路由
    // 两个参数: 第一个参数 路由, 第二个参数 要传递的数据
    navigate('/home/detail',{
      state: {
        id: item.id
      }
    })
  }

  return (
    <div className="target mt-10 bg-fff">
      <h3 className="h40 flex aic pl-8">目的地推荐</h3>
      <ul className="list">
        {houseList.map((item) => (
          <li onClick={()=>{toDetail(item)}} key={item.id} className="item">
            <div className="img-box rel">
              <img
                className="w100pc"
                src={item.imageUrl}
                alt=""
              />
              <span className="h40 fcc price fff abs">¥{item.showMinPrice}</span>
            </div>
            <div className="desc f14 pb-10">
              <h3 className="mt-10 f12">{item.name}</h3>
              <p className="mt-10 f10 lh15">
                {item.description}
              </p>
              <p className="city fcc mt-5 f10">{item.city}●{item.area}</p>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default inject('store')(React.memo(House));
